<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Web Components</title>
  </head>
  <body>
    <!-- 很好，那怎么去改变stepStatus呢 -->
    <el-steps>
      <el-step status="process">Step 1</el-step>
      <el-step status="wait">Step 2</el-step>
      <el-step status="finish">Step 3</el-step>
    </el-steps>
    <!-- 以下是组件 -->
    <script src="./components/ElStep.js"></script>
    <script>
      // 等待DOM完全加载
      document.addEventListener('DOMContentLoaded', function () {
        const elSteps = document.querySelector('el-steps')
        elSteps.addEventListener('click', function (event) {
          // 检查点击的目标是否是el-step元素
          let targetElement = event.target
          while (targetElement && targetElement.tagName !== 'EL-STEP') {
            targetElement = targetElement.parentNode
          }
          // 如果点击的是el-step元素，则改变其状态为current
          if (targetElement && targetElement.tagName === 'EL-STEP') {
            targetElement.setAttribute('status', 'current')
            const steps = document.querySelectorAll('el-step')
            steps.forEach((step) => {
              // 改变其他非点击el-step的class使得他变成wait
              if (step !== targetElement) {
                step.setAttribute('status', 'wait')
              }
              // 如果在当前点击的el-step之前则改变成success
              if (steps.indexOf(step) < steps.indexOf(targetElement)) {
                step.setAttribute('status', 'success')
              }
            })
          }
        })
      })
    </script>
  </body>
</html>
